<template>
  <el-dialog
    v-model="visible"
    title=""
    width="600px"
    destroy-on-close
    :close-on-click-modal="false"
    center
    class="topdialog"
    :show-close="false"
    :style="{ 'border-radius': '16px', overflow: 'hidden' }"
  >
    <!-- 自定义标题栏：渐变背景 -->
    <template #header>
      <div class="dialog-header">
        <el-icon size="20" style="margin-right: 8px">
          <Pointer />
        </el-icon>
        置顶设置
      </div>
    </template>
    <!-- 表单内容 -->
    <div class="dialog-body" style="padding: 12px 24px 0 24px">
      <el-form :model="form" label-width="80px" ref="formRef" size="default">
        <!-- 置顶类型 -->
        <el-form-item label="置顶类型" prop="type" required>
          <el-radio-group v-model="form.type" style="width: 100%">
            <el-space wrap alignment="start" style="width: 100%">
              <el-radio
                v-for="item in topStatusList"
                :value="item.value"
                border
                style="border-radius: 12px; padding: 10px 14px"
              >
                <span style="font-weight: 500">{{ item.label }}</span>
              </el-radio>
            </el-space>
          </el-radio-group>
        </el-form-item>

        <!-- 置顶备注 -->
        <!-- <el-form-item label="置顶备注" prop="topRemark">
          <el-input
            v-model="form.topRemark"
            type="textarea"
            :rows="3"
            placeholder="请简要说明置顶原因，便于后续跟踪处理（如：VIP客户紧急投诉）"
          />
        </el-form-item> -->
      </el-form>
      <p style="font-size: 12px; color: #888; margin-top: 8px; padding-left: 80px">
        提示：选择「客户投诉」或「订单退货」将自动归类，便于数据统计。
      </p>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div style="padding: 0 24px 24px; text-align: right">
        <el-button @click="visible = false"> 取 消 </el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm-button">
          确认置顶
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Pointer } from '@element-plus/icons-vue';
import { topOrder } from '../../api/platformOrders/orders/list';
import { topStatusList } from '../../utils/order';
import useUserStore from '../../store/modules/user';

const userStore = useUserStore();
const visible = ref(false);
const isSaleUser = computed(() => userStore.roles.includes('saleUser'));
const formRef = ref();
const form = reactive({
  orderId: '',
  topStatus: '',
  type: '',
  topRemark: ''
});

const emits = defineEmits(['ok']);

const show = (initData?: Partial<typeof form>) => {
  if (initData) {
    Object.assign(form, initData);
  } else {
    form.type = '';
    form.topRemark = '';
  }
  visible.value = true;
};

const handleConfirm = () => {
  if (!form.type) {
    ElMessage({
      message: '⚠️ 请选择置顶类型，以便系统归类处理',
      type: 'warning',
      duration: 2500
    });
    return;
  }
  // 将 form.type 视为当前要添加的值
  const valueToAdd = String(form.type); // 确保是字符串
  let topType: any = '';
  // 如果是取消置顶 直接取消
  if (form.type === 'cancel') {
    topType = '';
  } else {
    topType = valueToAdd;
  }

  topOrder({
    orderId: form.orderId,
    // 销售用户 置顶状态 为 topStatus
    // 客户用户 置顶状态 为 cTopStatus
    [isSaleUser.value ? 'topStatus' : 'cTopStatus']: 1,
    [isSaleUser.value ? 'topType' : 'cTopType']: topType,
    topRemark: form.topRemark
  }).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: '置顶成功',
        type: 'success',
        duration: 2500
      });
      emits('ok');
      visible.value = false;
    }
  });
};

// 取消置顶
const cancelTop = (row: any) => {
  ElMessageBox.confirm('确定取消置顶吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    topOrder({
      orderId: row.orderId,
      // 销售用户 取消置顶状态 为 topStatus
      // 客户用户 取消置顶状态 为 cTopStatus
      [isSaleUser.value ? 'topStatus' : 'cTopStatus']: 2,
      typeCode: isSaleUser.value ? 2 : 1,
      [isSaleUser.value ? 'topType' : 'cTopType']: ' ',
      topRemark: ''
    }).then((res: any) => {
      if (res.code === 200) {
        ElMessage({
          message: '取消置顶成功',
          type: 'success',
          duration: 2500
        });
        emits('ok');
        visible.value = false;
      }
    });
  });
};

defineExpose({ show, cancelTop });
</script>

<style lang="scss">
.topdialog {
  padding: 0;

  .dialog-header {
    background: rgb(24, 90, 157);
    color: white;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .confirm-button {
    background: rgb(24, 90, 157);
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
    transition:
      transform 0.2s,
      box-shadow 0.2s;
  }
}

/* 毛玻璃背景（可选） */
:deep(.el-overlay) {
  backdrop-filter: blur(6px) saturate(120%);
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* 对话框圆角和阴影 */
:deep(.el-dialog) {
  border-radius: 16px !important;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.2);
}

/* 输入框圆角 */
:deep(.el-textarea__inner),
:deep(.el-input__wrapper) {
  border-radius: 12px !important;
}

/* Radio border 高亮 */
:deep(.el-radio.is-bordered.is-checked) {
  border-color: #4facfe !important;
  background-color: #f5f9ff;
}
</style>
